<template>
  <div class="w-full h-full overflow-auto bg-white-soft">
    <div class="mt-6">
      <div class="ui FHContainer">
        <div class="FHMain">
          <div class="FHContent has-aside flex flex-row">
            <div class="content ">
              <div class="bg-white rounded-lg px-5 py-4">
                <el-tabs v-model="contentTabs" @tab-change="articleTabsChange">
                  <el-tab-pane label="文章" name="article">
                    <div v-if="articleLoading">
                      <el-skeleton/>
                    </div>
                    <div v-else>
                      <ArticleList :article-list="article" :show-author="true"></ArticleList>
                      <div class="text-center" v-if="articleHasMore">
                        <el-button type="primary" :loading="loadingMoreArticle" plain
                                   @click="loadMoreArticle()">点击查看更多
                        </el-button>
                      </div>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="每日阅读" name="readDaily">
                    <div v-if="readDailyLoading">
                      <el-skeleton/>
                    </div>
                    <div v-else>
                      <ArticleList :article-list="readDailyArticle" :show-author="true"></ArticleList>
                      <div class="text-center" v-if="readDailyHasMore">
                        <el-button type="primary" :loading="loadingMoreReadDaily" plain
                                   @click="loadMoreReadDaily()">点击查看更多
                        </el-button>
                      </div>
                    </div>
                  </el-tab-pane>
                </el-tabs>
              </div>
            </div>
            <div class="aside">
              <Note></Note>
              <!--最近文章-->
              <RecentArticleList :articleList="recentArticle" class="mt-3"></RecentArticleList>
              <!--分类目录-->
              <ArticleCategory :article-category="articleCategory" class="mt-3"></ArticleCategory>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {onMounted, ref} from 'vue'
import {useRouter} from 'vue-router'
import {
  ArticleCategoryCountResp,
  ArticlePageReq,
  ArticlePageResp,
  ArticleRecentReq,
  ArticleRecentResp
} from '@/api/article/types'
import {countArticleCategory, pageArticle, queryRecentArticle} from "@/api/article";
import ArticleList from "@/components/article/ArticleList.vue";
import RecentArticleList from "@/components/article/RecentArticleList.vue";
import ArticleCategory from "@/components/article/ArticleCategory.vue";
import Note from "@/components/common/Note.vue";

const router = useRouter()
const contentTabs = ref("article")
//文章
const article = ref<ArticlePageResp[]>([])
const articleLoading = ref(false)
const articleHasMore = ref(false)
const loadingMoreArticle = ref(false)
const articlePage = ref(1)
//最近文章
const recentArticle = ref<ArticleRecentResp[]>([])
//文章分类
const articleCategory = ref<ArticleCategoryCountResp[]>([])
//每日阅读
const readDailyLoading = ref(false)
const readDailyArticle = ref<ArticlePageResp[]>([])
const readDailyHasMore = ref(false)
const loadingMoreReadDaily = ref(false)
const readDailyPage = ref(1)

//加载文章列表
const loadArticleList = () => {
  const req: ArticlePageReq = {
    current: 1,
    size: 10
  }
  articleLoading.value = true
  pageArticle(req).then(result => {
    articleHasMore.value = result.pages > result.current
    article.value = result.records
    articleLoading.value = false
  })
}
const loadMoreArticle = () => {
  articlePage.value++
  const req: ArticlePageReq = {
    current: articlePage.value,
    size: 10
  }
  loadingMoreArticle.value = true
  pageArticle(req).then(result => {
    articleHasMore.value = result.pages > result.current
    article.value.push(...result.records)
    loadingMoreArticle.value = false
  })
}
const loadReadDailyList = () => {
  const req: ArticlePageReq = {
    current: 1,
    size: 10,
    categoryId: 2
  }
  readDailyLoading.value = true
  pageArticle(req).then(result => {
    readDailyHasMore.value = result.pages > result.current
    readDailyArticle.value = result.records
    readDailyLoading.value = false
  })
}
const loadMoreReadDaily = () => {
  readDailyPage.value++
  const req: ArticlePageReq = {
    current: readDailyPage.value,
    size: 10,
    categoryId: 2
  }
  loadingMoreReadDaily.value = true
  pageArticle(req).then(result => {
    readDailyHasMore.value = result.pages > result.current
    readDailyArticle.value.push(...result.records)
    loadingMoreReadDaily.value = false
  })
}
//加载最近文章
const loadRecentArticleList = () => {
  let req: ArticleRecentReq = {}
  queryRecentArticle(req).then(result => {
    recentArticle.value = result
  })
}
//加载分类列表
const loadArticleCategory = () => {
  countArticleCategory({}).then(result => {
    articleCategory.value = result
  })
}

const articleTabsChange = (tabName: string) => {
  switch (tabName) {
    case 'article':
      articlePage.value = 1
      articleHasMore.value = false
      article.value = []
      loadArticleList()
      break
    case 'readDaily':
      readDailyPage.value = 1
      readDailyHasMore.value = false
      readDailyArticle.value = []
      loadReadDailyList()
  }
}

onMounted(() => {
  loadArticleList()
  loadRecentArticleList()
  loadArticleCategory()
})
</script>

<style>
.gradient-text {
  background: -webkit-linear-gradient(315deg, #0583ff 25%, #00ff00); /* 渐变颜色 */
  -webkit-background-clip: text; /* 文字剪切背景 */
  -webkit-text-fill-color: transparent; /* 填充颜色透明 */
}
</style>